<template>
  <el-dialog
    :title="`日期时间转换`"
    v-model="drawerVisible"
    :draggable="true"
    :overflow="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    top="30px"
    width="800px"
    :destroy-on-close="true"
  >
    <el-form label-position="top">
      <div class="detail-form">
        <el-row>
          <el-col :span="11">
            <group-title title="日期转毫秒"></group-title>
            <el-form-item label="日期">
              <el-date-picker v-model="initVar.curDate" style="width: 220px" type="date" placeholder="选择日期"> </el-date-picker>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker v-model="initVar.curDateTime" style="width: 220px" type="datetime" placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="毫秒">
              <el-input style="width: 220px" isabled v-model="initVar.millisecond"></el-input>
            </el-form-item>
          </el-col>

          <el-col :offset="2" :span="11">
            <group-title title="毫秒转日期"></group-title>
            <el-form-item label="毫秒">
              <el-input style="width: 220px" v-model="initVar.millisecond1"></el-input>
            </el-form-item>
            <el-form-item label="日期">
              <el-date-picker v-model="initVar.curDate1" disabled style="width: 220px" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker
                v-model="initVar.curDateTime1"
                style="width: 220px"
                disabled
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <group-title title="纳秒/毫秒/秒转换"></group-title>
        <el-row>
          <el-col :span="8">
            <el-form-item label="纳秒">
              <el-input style="width: 220px" isabled v-model="initVar.nsCount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="毫秒">
              <el-input style="width: 220px" isabled v-model="initVar.msCount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="秒">
              <el-input style="width: 220px" isabled v-model="initVar.sCount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="drawerVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="UserDrawer">
import { reactive, ref, watch } from "vue";
import groupTitle from "@/components/application/form/group-title.vue";

const initVar = reactive({
  curDate: new Date(),
  curDateTime: new Date(),
  millisecond: new Date().getTime(),
  flag: 0,
  curDate1: new Date(),
  curDateTime1: new Date(),
  millisecond1: new Date().getTime(),

  nsCount: 0,
  msCount: 0,
  sCount: 0
});
watch(
  () => initVar.nsCount,
  () => {
    initVar.msCount = Number((BigInt(initVar.nsCount) / BigInt(1_000_000)).toString());
    initVar.sCount = Number((BigInt(initVar.nsCount) / BigInt(1_000_000_000)).toString());
  }
);

watch(
  () => initVar.curDate,
  () => {
    console.log(1);
    initVar.flag = 0;
    onChange();
  }
);
watch(
  () => initVar.curDateTime,
  () => {
    initVar.flag = 1;
    onChange();
  }
);
watch(
  () => initVar.millisecond1,
  () => {
    onChange1();
  }
);

const onChange = () => {
  if (initVar.flag === 0) {
    initVar.curDateTime = initVar.curDate;
    initVar.millisecond = initVar.curDate.getTime();
  } else if (initVar.flag === 1) {
    initVar.curDate = initVar.curDateTime;
    initVar.millisecond = initVar.curDateTime.getTime();
  }
};
const onChange1 = () => {
  let date;
  try {
    date = new Date().setTime(initVar.millisecond1);
  } catch (error) {}
  if (date) {
    initVar.curDateTime1 = date;
    initVar.curDate1 = date;
  }
};

interface DrawerProps {}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({});

// 接收父组件传过来的环境
const acceptParams = async (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

defineExpose({
  acceptParams
});
</script>

<style lang="scss" scoped></style>
